<template>
  <div>
    <p-table
      class="table-list-container"
      row-key="id"
      :columns="columns"
      bordered
      v-bind="$attrs"
      v-on="$listeners"
    >
      <a
        slot="productNo"
        slot-scope="text, record"
        @click="$emit('number-click', record)"
      >
        {{ text }}
      </a>
    </p-table>
  </div>
</template>

<script>
import { getDicList, postOrganizationInfo } from '@/api/public.js';
import { PLAN_TYPE } from '@/constants/index';

export default {
  props: {},
  data() {
    return {};
  },
  computed: {
    stateOptions() {
      return this.$store.state.dictionary.dict['product_status'] || {};
    },
    typeOptions() {
      return this.$store.state.dictionary.dict['product_type'] || {};
    },
    formOptions() {
      return this.$store.state.dictionary.dict['product_from'] || {};
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '产品编号',
          dataIndex: 'productNo',
          width: 150,
          sorter: true,
          ellipsis: true,
          scopedSlots: { customRender: 'productNo' },
        },
        {
          align: 'center',
          title: '产品名称',
          dataIndex: 'name',
          // customRender: (text) => this.orgOptions[text],
          ellipsis: true,
          width: 160,
          sorter: true,
        },
        {
          align: 'center',
          title: '产品类型',
          dataIndex: 'type',
          customRender: (text) => this.typeOptions[text],
          ellipsis: true,
          width: 160,
          sorter: true,
        },
        {
          align: 'center',
          title: '机种',
          dataIndex: 'modelName',
          ellipsis: true,
          width: 160,
          sorter: true,
        },
        {
          align: 'center',
          title: '出货形态',
          dataIndex: 'form',
          customRender: (text) => this.formOptions[text],
          sorter: true,
          ellipsis: true,
          width: 100,
        },
        {
          align: 'center',
          title: '尺寸',
          dataIndex: 'size',
          sorter: true,
          ellipsis: true,
          width: 120,
        },
        {
          align: 'center',
          title: '技术别',
          dataIndex: 'technology',
          // customRender: (text) => this.appOptions[text],
          sorter: true,
          width: 100,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '分辨率',
          dataIndex: 'resolution',
          sorter: true,
          ellipsis: true,
          width: 100,
          // customRender: (text) => this.orgOptions[text],
        },
        {
          align: 'center',
          title: '状态',
          dataIndex: 'state',
          sorter: true,
          ellipsis: true,
          width: 100,
          customRender: (text) => this.stateOptions[text],
        },
        {
          align: 'center',
          title: '创建人',
          dataIndex: 'createUserName',
          width: 160,
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建时间',
          dataIndex: 'createTime',
          width: 160,
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '最后修改人',
          dataIndex: 'updateUserName',
          sorter: true,
          width: 100,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '最后修改时间',
          dataIndex: 'updateTime',
          width: 160,
          sorter: true,
          ellipsis: true,
        },
      ];
      return columns;
    },
  },
  async created() {
    this.nodeOptions = await this.getDicList('plan_node');
    this.stateOptions = await this.getDicList('state');
    this.orgOptions = await this.postOrganizationInfo();
  },
  methods: {
    async postOrganizationInfo() {
      const result = await postOrganizationInfo({
        code: 'ltcsmsizebu',
      });
      const data = result?.data?.data || [];
      return data.reduce((pre, cur) => {
        pre[cur.code] = cur.name;
        return pre;
      }, {});
    },
    async getDicList(code) {
      if (!code) return [];
      const result = await getDicList(code);
      const data = result?.data?.data || [];
      return data.reduce((pre, cur) => {
        pre[cur.value] = cur.label;
        return pre;
      }, {});
    },
  },
};
</script>

<style lang="less" scoped>
.table-list-container {
  margin-top: 20px;
}
</style>
